var _this = this;
function isPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
var throllte = function (fn, n) {
    var timer = null;
    var context = _this;
    var isLock = false;
    return function () {
        var argument = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            argument[_i] = arguments[_i];
        }
        if (!isLock) {
            isLock = true;
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                fn.apply(context, argument);
                isLock = false;
                // console.log('throllte')
            }, n);
        }
    };
};
var Demo = /** @class */ (function () {
    function Demo() {
        var _this = this;
        var _a;
        this.count = 143;
        this.imgArr = [];
        this.prevY = 0;
        this.clientHeight = 13000;
        this.a = 1;
        this.isPC = isPC();
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.canvas = document.querySelector("#myCanvas");
        this.box = document.querySelector(".box");
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.ctx = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getContext("2d");
        this.curr = 0;
        this.imageIndex = 0;
        this.lis = document.querySelectorAll(".ul li");
        this.load(function () {
            console.log('this.imageSize', _this.imageSize);
        });
    }
    Demo.prototype.getImage = function (i, callback) {
        var _this = this;
        if (callback === void 0) { callback = function () { }; }
        var img = new Image();
        var len = i.toString();
        var n = '';
        switch (Number(len.length)) {
            case 1:
                n = '0000' + i;
                break;
            case 2:
                n = '000' + i;
                break;
            case 3:
                n = '00' + i;
                break;
        }
        img.src = "https://bucket.zhiyun-tech.com/detail/wbl3/wbl3-detail-animation-1/wbl3-detail-animation-".concat(n, ".jpg");
        img.onload = function () {
            _this.curr++;
            if (_this.curr == _this.count) {
                callback();
                console.log('width', _this.imgArr[0].width, 'height', _this.imgArr[0].height);
                _this.imageSize = {
                    width: _this.imgArr[0].width,
                    height: _this.imgArr[0].height
                };
                _this.resetSize();
                _this.scroll();
                _this.drawImage(_this.imageIndex);
            }
        };
        this.imgArr.push(img);
    };
    Demo.prototype.resetSize = function () {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.canvas.width = this.width;
        this.canvas.height = this.height;
        var _h = this.width * this.imageSize.height / this.imageSize.width;
        this.drawSize = {
            width: this.width,
            height: _h,
            x: 0,
            y: (this.height - _h) / 2
        };
    };
    Demo.prototype.load = function (callback) {
        if (callback === void 0) { callback = function () { }; }
        for (var i = 1; i <= this.count; i++) {
            this.getImage(i, callback);
        }
    };
    Demo.prototype.drawImage = function (i) {
        var _a, _b;
        (_a = this.ctx) === null || _a === void 0 ? void 0 : _a.clearRect(0, 0, this.width, this.height);
        (_b = this.ctx) === null || _b === void 0 ? void 0 : _b.drawImage(this.imgArr[i], 0, 0, this.imageSize.width, this.imageSize.height, 0, this.drawSize.y, this.drawSize.width, this.drawSize.height);
    };
    Demo.prototype.scroll = function () {
        var _this = this;
        this.init();
        window.addEventListener('scroll', function (e) {
            _this.init();
        }, false);
    };
    Demo.prototype.scrollToShow = function (min, max, i) {
        if (this.imageIndex >= max || this.imageIndex < min) {
            if (this.lis[i].classList.contains('active')) {
                this.lis[i].classList.remove('active');
            }
        }
        else if (this.imageIndex < max && this.imageIndex >= min) {
            if (!this.lis[i].classList.contains('active')) {
                this.lis[i].classList.add('active');
            }
        }
    };
    Demo.prototype.onWindowSize = function () {
        var _this = this;
        window.addEventListener("resize", function () {
            throllte(function () {
                // console.log("resize")
                _this.resetSize();
                _this.drawImage(_this.imageIndex);
            }, 100)();
        }, false);
    };
    Demo.prototype.init = function () {
        if (window.scrollY - this.prevY) {
            this.imageIndex = parseInt((window.scrollY * this.count / this.clientHeight).toString());
            this.imageIndex > this.count - 1 ? this.imageIndex = this.count - 1 : this.imageIndex;
        }
        else {
            this.imageIndex = parseInt((window.scrollY * this.count / this.clientHeight).toString());
        }
        this.prevY = window.scrollY;
        this.drawImage(this.imageIndex);
        this.scrollToShow(5, 10, 0);
        this.scrollToShow(8, 20, 1);
        this.scrollToShow(15, 25, 2);
        this.scrollToShow(20, 35, 3);
        this.scrollToShow(60, 80, 4);
        this.onWindowSize();
    };
    return Demo;
}());
var d = new Demo();
